<template>
  <el-dialog
      title="授权"
      :close-on-click-modal="false"
      :visible.sync="visible">
  <el-row type="flex" justify="center">
    <el-col :span="23">
      <el-form :model="formInline" size="small">
        <el-form-item label="授权方式">
          <el-radio-group v-model="formInline.value1">
            <el-radio label="1">角色授权</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-transfer
                  filterable
                  filter-placeholder="关键词"
                  :titles="['未授权', '已授权']"
                  v-model="roleIdList"
                  :props="propsAlias"
                  :data="generateData">
          </el-transfer>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button type="primary" @click="authSubmit">确认授权</el-button>
            <el-button @click="visible = false">取消</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  </el-dialog>
</template>

<script>

import {roleList} from "@/api/operations-center/role";

export default {
    data() {
      return {
        id : '',
        formInline: {
          value1: '1',
        },
        roleIdList: [],
        generateData: [],
        visible: false,
        propsAlias:{
          key: 'id',
          label: 'roleName'
        }
      }
    },
    methods: {
      authSubmit() {
        let labelStr=[]
        this.generateData.forEach((item,index)=>{
          let flag=false
          this.roleIdList.forEach((item_val,index_val)=>{
            if (item.id===item_val){
              flag=true
            }
          })
          if(flag){
            labelStr.push(item.roleName)
          }
        })
        let roleNameStr=labelStr.toString()
        this.visible = false
        this.$emit('setVisibleRange',roleNameStr,this.roleIdList)
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },
      init () {
        this.visible = true
        roleList('',true).then((res)=>{
          if (res && res.code === 200) {
            this.generateData=res.data
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
